
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<?php
function getConnection()
{
	global $dbPassword;
	$mysql = new mysqli('localhost', 'plotkinm', 'FaceBooK', 'plotkinm_db');
	if($mysql->connect_error)
		die('Connection error: '.$mysql->connect_error);
	return $mysql;
}
?>
<?php
function states()
{
	$conn = getConnection();
	$statesresults = $conn->query('SELECT id, name, abbrev FROM `states` ');
	$conn->close();
	return $statesresults;
}
$statesresults = states();
?>
</head>

<body>

  <script>
  $(document).ready(function() {
    $("input#states").autocomplete({
    source: [
	<?php while ($sr = $statesresults->fetch_assoc()){ ?>
	"<?=$sr['name']?>",
	<?php } ?>
	]
});
  });
  </script>
<div class="ui-widget">
	<label for="states">States: </label>
	<input id="states">
</div>
</body>
</html>
